<template>
<div class="arLayout">
    <div class="Box" v-loading="loading" element-loading-text="loading..." element-loading-background="white">
        <p>
            <span>客房类型</span>
            <el-select v-model="info.type" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in kinds" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </p>
        <p>
            <span>价格</span>
            <el-input-number v-model="info.price" :precision="2" :step="10" :max="10000" />
        </p>
        <p class="upload">
            <span>客房图片</span>
            <span>
                <upload-box url="/api/room/uploadRoomImage" 
                            ref="uploadBoxRef"
                            :limit="5" 
                            :autoUpload="false"
                            @success="clear"
                            :id="imgId"
                            :data="{ id:imgId }"
                            @delImg="delImg"
                ></upload-box>
            </span> 
        </p>
        <div class="roomSetting">
            <span>房间设施</span>
            <div class="setingBox">
                <div v-for="item in settingType" :key="item.id">
                    <p>{{ item.name }}</p>
                    <el-checkbox-group v-model="setting[item.code].list">
                        <el-checkbox v-for="itemm in item.deList" :key="itemm.id" :label="itemm.name"/>
                    </el-checkbox-group>
                </div>
            </div>
        </div>
        <p class="desc">
            <span>客房描述</span>
            <span>
                <el-input
                    v-model="info.desc"
                    :rows="3"
                    type="textarea"
                    placeholder="房间描述词"
                />
            </span>
        </p>
        <p>
            <span>添加数量</span>
            <el-input-number v-model="info.num" :step="1" :min="1" :max="100" />
        </p>
        <p class="btn">
            <button @click="addRoom" :disabled="!isAdd">立即添加</button>
        </p>
    </div>
</div> 
</template>

<script lang="ts" setup>
import { ref, onBeforeMount, computed, inject } from 'vue'
import { useUserInfoStore } from '@/store/userInfoState'
import { get, post } from '@/http/axios'
import { ElMessage } from 'element-plus'
import { uploadBox } from '@/components'
import { getCookies } from '../../utils/cookies'

type kindType ={
    id:number
    name:string
}
type infoType = {
    type:number
    price:number
    desc:string
    num:number
}
type setTypeType = {
    id:number
    name:string
    code:string
    deList:Array<{
        id:number
        name:string
    }>
}
let kinds = ref<Array<kindType>>()
const store = useUserInfoStore()
let settingType = ref<Array<setTypeType>>([])
let upLoading = ref<boolean>(true) 
const uploadBoxRef = ref()
let setting = ref<any>()
let loading = ref<boolean>(true)
let id = ref<number>()
let imgId = ref<number>(0)
const loadAgain = inject('loadAgain',Function)

let info = ref<infoType>({
    type:1,
    price:99.00,
    desc:'',
    num:1
}) 
const infoCy = ref<infoType>({
    type:1,
    price:99.00,
    desc:'',
    num:1
}) 
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    getRoomKinds()
    getRoomType()
})
function getRoomKinds(){
    get('/roomName/queryAll').then(res => {
        kinds.value = res.result
        let timer = setTimeout(() => {
            clearTimeout(timer)
            loading.value = false
        })
    })
}
function delImg(name:string){
    upLoading.value = false
    if (uploadBoxRef.value.fileList.length < 3) {
        ElMessage.error('图片不能少于3张，请添加后再删除')
        let timer = setTimeout(() => {
            clearTimeout(timer)
            upLoading.value = true
        })
        return
    }
    get('/hotel/deleteImage?id=' + id.value + '&imageId=' + name)
    .then(res => {
        if (res.result) ElMessage.success('删除成功')
        let timer = setTimeout(() => {
            clearTimeout(timer)
            upLoading.value = true
        })
    })
}
function getRoomType() {
    get('/deviceFa/queryAll').then(res => {
        const obj = {}
        settingType.value = res.result
        if (res.result.length) {
            res.result.forEach(el => {
                obj[el.code] = { id: el.id, list: [] } 
            })
        }
        setting.value = obj      
    })
}
function addRoom() {
    let idList = check()
    if (!idList) {
        return
    }
    post('/room/addRoom',{
        hotel_id: id.value,
        name_id: info.value.type,
        price: info.value.price,
        num: info.value.num,
        description: info.value.desc,
        room_device: idList.toString()
    }).then(res => {
        imgId.value = res.result
        uploadBoxRef.value.submitUpload()
        ElMessage.success('添加成功')
    }).catch(err => {
        ElMessage.error('添加失败' + err)
    })
}
//数据校验是否合格
function check(){
    let idList = [] as any
    Object.values(setting.value).forEach(el => {
        let arr = settingType.value.find(ele => ele.id === el.id)
        el.list.forEach((ele:string) => {
            idList.push(arr?.deList.find(elel => elel.name === ele).id) 
        })
    })
    if (uploadBoxRef.value.fileList.length < 3) {
        ElMessage.error('最少提交3张图片')
        return null
    }
    if (idList.length < 5) {
        ElMessage.error('房间设施最少选择5项')
        return
    }
    return idList
}
//重新加载本网页
function clear() {
    Object.values(setting.value).forEach(el => {
        el.list = []
    })
    info.value = infoCy.value
    loadAgain()
}
const isAdd = computed(() => {
    let flag = true
    Object.keys(info.value).forEach(el => {
        if (!info.value[el]){
            flag = false
        }
    })
    return flag
})
</script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .Box{
        width: 85%;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .Box{
        width: 80%;
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .Box{
        width: 60%;
    }
}
.arLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.Box{
    padding: 20px;
    gap: 20px 0;
    box-sizing: border-box;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    box-shadow: var(--el-box-shadow);
    & p{
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
        white-space: nowrap;
    }
    & p span:nth-child(1){
        width: 130px;
        background: rgb(52, 152, 219,0.2);
        padding: 6px 0;
        box-sizing: border-box;
        border-radius: 8px;
        @include flexRowCenter;
    }
}
.upload{
    & span:nth-child(2){
        border: 1px solid var(--el-border-color);
        width: calc(100% - 140px);
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4px;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
    }
}
.desc{
    & span:nth-child(2){
        width: calc(100% - 140px);
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
}
.roomSetting{
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    & span:nth-child(1){
        width: 130px;
        background: rgb(52, 152, 219,0.2);
        padding: 6px 0;
        box-sizing: border-box;
        border-radius: 8px;
        @include flexRowCenter;
    }
}
.setingBox{
    width: calc(100% - 140px);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-wrap: wrap;
    gap: 15px;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
    & div{
        width: 100%;
        display: flex;
        align-content: center;
        justify-content: start;
        flex-wrap: wrap;
        gap: 15px;
        font-size: 13px;
    }
    & div p:nth-child(1){
        padding-bottom: 10px;
        border-bottom: 1px solid var(--el-border-color);
    }
}
.btn{
    justify-content: center !important;
    & button{
        width: 200px;
        border: none;
        background: #3498db;
        color: white;
        outline: none;
    }
    & button:hover{
        background: #2980b9;
    }
    & button:disabled{
        background: #dad9d9;
    }
}
:deep(.el-checkbox){
    width: calc((100% - 105px) / 7);
}
</style>